<template>
	<view>
		<u-skeleton rows="50" :loading="loading" :animate="true" v-if="isShow"></u-skeleton>
		<view v-else>
			<view class="header">
				<u-icon name="map" color="#fff" size="25"></u-icon>
				<image class="img" src="../../static/Image/m-index/logo.png" mode=""></image>
				<u-search placeholder="请输入关键字" shape="square" v-model="keywords" @search="search0" :showAction="false">
				</u-search>
				<u-icon name="gift" color="#fff" size="25"></u-icon>
			</view>
			<view class="catelist">
				<u-tabs :activeStyle="{color:'#fff'}" :inactiveStyle="{color:'#fff'}" :list="catelist" lineColor='#fff'
					@click="toCatelist"></u-tabs>
			</view>
			<u-swiper height="200" :list="bannerlist" indicator circular indicatorMode="dot"></u-swiper>
			<view>
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(item,index) in List" :key="index">
						<image class="image" :src="item.img" mode=""></image>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="time">
				<view class="left">
					<text class="text1">限时秒杀</text>
					<text class="text2">查看更多 ></text>
					<view style="margin-left: 20rpx;">
						<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
					</view>
				</view>
				<view class="right">
					<view class="right-top">
						<text>品牌上新</text>
						<text>9点整，抢大牌</text>
						<text class="text3">疯抢红包 ></text>
					</view>
					<view class="right-bottom">
						<text>日用好物</text>
						<text>愿君多采撷</text>
						<text class="text3">塞满奖券 ></text>
					</view>
				</view>
			</view>
			<view class="imgbox">
				<u-subsection @change="sectionChange" activeColor="#FF6600" :list="list1" :current="index">
				</u-subsection>
				<view class="img">
					<image src="../../static/Image/m-index/pre01.png" mode=""></image>
					<image src="../../static/Image/m-index/pre02.png" mode=""></image>
					<image src="../../static/Image/m-index/pre03.png" mode=""></image>
					<image src="../../static/Image/m-index/pre04.png" mode=""></image>
				</view>
			</view>
			<view>
				<u-subsection inactiveColor="#FF9900" activeColor="#FF9900" @change="changeType" mode='subsection'
					:list="list" :current="current">
				</u-subsection>
				<view class="box" v-for="item in Gethortgoods" :key="item.id" @click="toDetail(item.id)">
					<view class="left">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="right">
						<text>{{item.goodsname}}</text>
						<text class="text1">现价格：￥{{item.price}}</text>
						<text class="text2" style="text-decoration: line-through;">原价格：￥{{item.market_price}}</text>
						<text class="text3" @click.stop="tocart(item.id)">立即抢购</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBanner,
		getHomeCate,
		Gethortgoods,
		addcart
	} from '@/request/app.js'
	export default {
		data() {
			return {
				loading: true,
				isShow: true,
				keywords: '',
				bannerlist: [],
				catelist: [],
				List: [{
						img: '../../static/Image/m-index/icon1.png',
						title: '限时秒杀'
					},
					{
						img: '../../static/Image/m-index/icon2.png',
						title: '畅销商品'
					},
					{
						img: '../../static/Image/m-index/icon3.png',
						title: '品质大牌'
					},
					{
						img: '../../static/Image/m-index/icon4.png',
						title: '小U自营'
					},
					{
						img: '../../static/Image/m-index/icon5.png',
						title: '积分商城'
					}
				],
				list1: ['双十一尖货预购', '畅购全球'],
				list: ['未付款', '待评价', '已付款'],
				current: 0,
				index: 0,
				Gethortgoods: []
			}
		},
		onLoad() {
			console.log(uni.getSystemInfoSync().platform, '获取系统信息的平台状态');
			let platform = uni.getSystemInfoSync().platform
			switch (platform) {
				case "ios":
					console.log('你已经进入苹果系统，你需要执行的代码是~')
					break;
				case "devtools":
					console.log('你已经进入微信小程序，你需要执行的代码是~')
					break;
				case "android":
					console.log('你已经进入安卓平台，你需要执行的代码是~')
					break;
				default:
					break;
			}
			// 延时2秒钟
			setTimeout(() => {
				this.isShow = false
			}, 2000)
			this.getbannerlist()
			this.getCate()
			this.gethortgoods(0)
		},
		methods: {
			async getbannerlist() {
				let res = await getBanner()
				console.log(res, '轮播图');
				if (res.data.code == 200) {
					this.bannerlist = res.data.list.map(item => this.$imgUrl + item.img)
				}
			},
			async getCate() {
				let res = await getHomeCate()
				console.log(res, '首页快速分类导航');
				if (res.data.code == 200) {
					this.catelist = res.data.list.map(item => ({
						name: item.catename,
						id: item.id
					}))
				}
			},
			sectionChange(e) {
				console.log(e, '事件源对象');
				this.index = e
			},
			changeType(e) {
				console.log(e, '事件源对象');
				this.current = e
				this.gethortgoods(e)
			},
			async gethortgoods(e) {
				let res = await Gethortgoods()
				console.log(res, '获取商品信息');
				if (res.data.code == 200) {
					this.Gethortgoods = res.data.list[e].content.map(item => ({
						img: this.$imgUrl + item.img,
						goodsname: item.goodsname,
						price: item.price,
						market_price: item.market_price,
						id: item.id
					}))
				}
			},
			toCatelist(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/catelist/catelist?id=' + e.id + '&type=' + 1
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			search0() {
				uni.navigateTo({
					url: '/pages/searchlist/searchlist?keywords=' + this.keywords
				})
			},
			tocart(id) {
				addcart({
					uid: uni.getStorageSync('userinfo').uid,
					goodsid: id,
					num: 1
				}, {
					authorization: uni.getStorageSync('userinfo').token
				}).then(res => {
					console.log(res, '购物车添加');
					if (res.data.code == 200) {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/cart/cart'
							})
						}, 1000)
						uni.showToast({
							title: res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style>
	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.header {
		display: flex;
		background-color: #FF6633;
	}

	.header .img {
		width: 200rpx;
		height: 50rpx;
		margin: 10rpx 10rpx 0 10rpx;
	}

	.catelist {
		color: #fff;
		background-color: #FF6600;
	}

	.time {
		display: flex;
	}

	.time .left {
		width: 50%;
		height: 410rpx;
		background: url(../../static/Image/m-index/big.png) no-repeat;
		background-size: 100%;
	}

	.time .left .text1 {
		color: #006600;
		margin: 20rpx;
		display: inline-block;
	}

	.time .left .text2 {
		margin: 20rpx 0 0 40rpx;
		display: inline-block;
	}

	.time .right {
		width: 50%;
	}

	.time .right .right-top {
		width: 100%;
		height: 205rpx;
		background: url(../../static/Image/m-index/small1.png) no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.time .right .right-top text {
		color: #FF6633;
		margin-left: 30rpx;
	}

	.time .right .right-top .text3 {
		color: #fff;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		display: inline-block;
		background-color: #FF6633;
	}

	.time .right .right-bottom .text3 {
		color: #fff;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		display: inline-block;
		background-color: #9966CC;
	}

	.time .right .right-bottom {
		width: 100%;
		height: 205rpx;
		background: url(../../static/Image/m-index/small2.png) no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.time .right .right-bottom text {
		color: #9966CC;
		margin-left: 30rpx;
	}

	.imgbox .img {
		display: flex;
	}

	.imgbox .img image {
		width: 180rpx;
		height: 180rpx;
		margin-left: 10rpx;
	}

	.box {
		width: 100%;
		border: 1px solid #eee;
		margin-top: 20rpx;
		display: flex;
	}

	.box .left image {
		width: 300rpx;
		height: 320rpx;
		margin-right: 10rpx;
	}

	.box .right {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.box .right .text1 {
		color: #FF0000;
	}

	.box .right .text2 {
		color: #999999;
	}

	.box .right .text3 {
		width: 150rpx;
		height: 60rpx;
		display: inline-block;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		background-color: #FF9900;
		border-radius: 10rpx;
	}
</style>
